<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
</head>
<style>
    * {
        box-sizing: border-box;
    }

    .box {
        width: 400px;
        height: 900px;
        margin-left: 600px;
        border: 1px black solid;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
    }

    .one {
        width: 100%;
        height: 150px;
        border: 1px black solid;
        box-sizing: border-box;
        background-image: url('https://k.sinaimg.cn/n/sinakd20230707s/380/w1267h713/20230707/ce1e-994cda41c767d0364c951e60122aee62.jpg/w700d1q75cms.jpg');
        background-repeat: no-repeat;
        background-size: 400px 200px;
    }

    .a1 {
        width: 100%;
        height: 50px;
        /* border: 1px black solid; */
        font-size: 25px;
        line-height: 50px;
        padding-left: 20px;
        box-sizing: border-box;
        color: palevioletred;
    }

    .a2 {
        width: 100%;
        height: 40px;
        /* border: 1px black solid; */
        margin-top: 55px;
        line-height: 40px;
        color: white;
    }

    .two {
        width: 100%;
        height: 750px;
        position: relative;
        background-color: aliceblue;
    }

    #ditu {
        width: 400px;
        height: 900px;
        display: none;
    }

    .home {
        width: 100%;
        height: 100%;
        display: block;
    }

    .gonggao {
        width: 450px;
        height: 200px;
        position: absolute;
        bottom: 0;
        /* background-color: blueviolet; */
        display: none;
        border: 1px solid black;
        background-color: rgb(251, 255, 240);
    }

    .zdl {
        width: 300px;
        height: 50px;
        background-color: aqua;
        position: absolute;
        bottom: 20px;
        left: 50px;
        color: white;
        line-height: 50px;
        font-size: 20px;
    }

    .b1 {
        /* background-color: aqua; */
        font-size: 18px;
        color: black;
        padding-left: 155px;
    }

    .b2 {
        /* background-color: brown; */
        font-size: 18px;
        color: black;
        padding-left: 10px;
    }

    .b3 {
        /* background-color: beige; */
        color: black;
        padding-left: 10px;
        font-size: 12px;
        border-bottom: 1px solid black;
    }

    .amap-icon img,
    .amap-marker-content img {
        width: 25px;
        height: 34px;
    }

    .cus_info_window {
        background-color: #fff;
        padding: 10px;
    }

    .c1 {
        width: 100%;
        height: 200px;
    }

    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .p1 {
        width: 400px;
        height: 200px;
    }

    .c2 {
        width: 100%;
        height: 500px;
    }

    .a {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        line-height: 100px;
        padding-left: 20px;
    }

    .a0 {
        width: 100px;
        height: 300px;
        position: absolute;
        left: 0;
    }

    .b {
        width: 299px;
        height: 300px;
        background-color: aqua;
        position: absolute;
        right: 0;
        display: none;
    }

    .show {
        display: block;
    }

    .p2{
        width: 299px;
        height: 300px;
    }
    .c3{
        width: 100px;
        height: 50px;
    }
</style>

<body>
    <div class="box">
        <div id="ditu">
        </div>
        <script type="text/javascript">
            window._AMapSecurityConfig = {
                securityJsCode: "f3c22e45e9736dae027e037d2ae2f60b",
            };
        </script>
        <script src="https://webapi.amap.com/loader.js"></script>
        <!-- <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=2.0&key=e1c0aa4e99078e171947e43324f2dce1"></script> -->
        <div class="home">
            <div class="one">
                <div class="a1">郑州荥阳吾悦广场店 ></div>
                <div class="a2">客官请适度点餐，光盘行动拒绝浪费，使用公勺公筷。></div>
                    
                
            </div>
            <div class="two">
                <div class="gonggao">
                    <div class="b1">门店公告</div>
                    <div class="b2">商家公告</div>
                    <div class="b3">客官：请适度点餐，光盘行动拒绝浪费，使用公勺公筷。</div>
                    <button class="zdl">知&emsp;&emsp;道&emsp;&emsp;了</button>
                </div>
                <div class="c1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img
                                src="https://tse1-mm.cn.bing.net/th/id/OIP-C.iXDHoqP8WXJV5xKZl4AJpQHaE8?w=270&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                                alt="" class="p1"></div>
                        <div class="swiper-slide"><img
                                src="https://tse3-mm.cn.bing.net/th/id/OIP-C.r94GvzoWZH2vJbMsdjeDxAHaE8?w=274&h=183&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                                alt="" class="p1"></div>
                        <div class="swiper-slide"><img
                                src="https://tse2-mm.cn.bing.net/th/id/OIP-C.yWwCn856VvojHHoZo3tKFwHaEn?w=294&h=183&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                                alt="" class="p1"></div>
                    </div>
                </div>

                <div class="c2">
                    <div class="a0">
                        <div class="a">招牌烤鱼</div>
                        <div class="a">专薯虾锅</div>
                        <div class="a">特色烧烤</div>
                    </div>
                    <div class="b show"><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.bMAFG4glIIu9LOMc9QTIgQHaEI?w=329&h=183&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="" class="p2"></div>
                    <div class="b"><img src="https://pic.nximg.cn/file/20230207/33845168_132414705105_2.jpg" alt="" class="p2"></div>
                    <div class="b"><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.1IvWa22wbX3dA1sh7gnv3QHaE7?w=276&h=184&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="" class="p2"></div>
                </div>
                <div class="c3">
                    <span>共￥0元<button>结算</button></span>
                </div>
                
            </div>
        </div>
    </div>



    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <script type="text/javascript">
        AMapLoader.load({
            key: "e1c0aa4e99078e171947e43324f2dce1", //申请好的Web端开发者 Key，调用 load 时必填
            version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
            .then((AMap) => {
                const map = new AMap.Map("ditu", {
                    center: [113.428155, 34.774258]
                });
                const infoWindow = new AMap.InfoWindow({
                    //创建信息窗体
                    isCustom: true, //使用自定义窗体
                    content: "<div>郑州荥阳吾悦广场店</div>", //信息窗体的内容可以是任意html片段
                    offset: new AMap.Pixel(16, -45),
                });
                const onMarkerClick = function (e) {
                    infoWindow.open(map, e.target.getPosition()); //打开信息窗体
                    //e.target就是被点击的Marker
                };
                const marker = new AMap.Marker({
                    position: [113.428155, 34.774258],
                });
                map.add(marker);
                marker.on("click", onMarkerClick); //绑定click事件
            })
            .catch((e) => {
                console.error(e); //加载错误提示
            });
    </script>

    <script>
        // 地图
        var a1 = document.querySelector('.a1')
        a1.addEventListener('click', () => {
            document.querySelector('#ditu').style.display = 'block'
        })

        // 公告
        var a2 = document.querySelector('.a2')
        a2.addEventListener('click', () => {
            document.querySelector('.gonggao').style.display = 'block'
        })
        var zdl = document.querySelector('.zdl')
        zdl.addEventListener('click', () => {
            location.reload()
        })

        // 切换
        var a = document.querySelectorAll('.a')
        var b = document.querySelectorAll('.b')
        a.forEach((item,index)=>{
            item.addEventListener('click',()=>{
                b.forEach(item2=>{
                    item2.classList.remove('show')
                })
                b[index].classList.add('show')
            })
        })
    </script>

    <script>
        var swiper = new Swiper(".c1", {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>
</body>

</html>